import React, { Component } from "react";
import { Form, Input /* , Button */ } from "antd";
import { connect } from "dva";
import styles from "./UserManagement.less";
import BasicInfo from "./components/BasicInfo";

@connect((stores) => ({
  userInfo: stores.user.userInfo,
}))
@Form.create()
class UserManagement extends Component {
  state = {
    canCustomEmailModify: false,
    canCustomMobileModify: false,
  };

  componentDidMount() {
    this.init();
  }

  init = () => {
    // const { dispatch } = this.props;
    // dispatch({
    //   type: "userInfo/getUserInfo",
    // });
  };

  onChangeModifiability = (state) => {
    this.setState((prevState) => ({
      [state]: !prevState[state],
    }));
  };

  resetFields = (fieldName) => {
    const {
      form: { resetFields },
    } = this.props;
    resetFields([fieldName]);
  };

  handleSave = (type) => {
    const Map = {
      customEmail: "canCustomEmailModify",
      customMobile: "canCustomMobileModify",
    };
    const {
      form: { validateFields },
      dispatch,
    } = this.props;
    validateFields([type], (error, values) => {
      if (error) {
        return;
      }
      dispatch({ type: "userInfo/updateUserInfo", payload: values }).then(
        (res) => {
          if (res.success) {
            this.init();
            this.onChangeModifiability(Map[type]);
          }
        }
      );
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      userInfo: {
        userCode,
        userName,
        displayName,
        position: userPartType,
        departmentName: orgName,
        sex: userSex,
        // userType,
        // userPoliceId,
        phone: userMobile,
        email: officeEmail,
      },
    } = this.props;
    const { canCustomEmailModify, canCustomMobileModify } = this.state;
    const formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <div className={styles.root}>
        <BasicInfo
          formData={{
            userCode,
            userName,
            displayName,
            userPartType,
            orgName,
            userSex,
            // userType,
            // userPoliceId,
          }}
        />

        <div className={styles.info}>
          <Form {...formLayout}>
            <Form.Item label="手机号码">
              <div style={{ display: "flex", flexDirection: "row" }}>
                {getFieldDecorator("customMobile", {
                  initialValue: userMobile || "无",
                  rules: [
                    {
                      required: true,
                      pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                      message: "请输入正确的手机号码",
                    },
                  ],
                })(
                  <Input
                    style={{ width: 466, marginLeft: 8 }}
                    placeholder="请输入手机号码"
                    disabled={!canCustomMobileModify}
                  />
                )}
                {/* {canCustomMobileModify ? (
                    <React.Fragment>
                      <Button
                        type="link"
                        onClick={() => {
                          this.handleSave("customMobile");
                        }}
                      >
                        保存
                      </Button>
                      <Button
                        type="link"
                        onClick={() => {
                          this.resetFields("customMobile");
                          this.onChangeModifiability("canCustomMobileModify");
                        }}
                      >
                        关闭
                      </Button>
                    </React.Fragment>
                  ) : (
                    <Button
                      type="link"
                      onClick={() => {
                        this.onChangeModifiability("canCustomMobileModify");
                      }}
                    >
                      修改
                    </Button>
                  )} */}
              </div>
            </Form.Item>
            <Form.Item label="邮箱">
              <div style={{ display: "flex", flexDirection: "row" }}>
                {getFieldDecorator("customEmail", {
                  initialValue: officeEmail,
                  rules: [
                    {
                      required: true,
                      type: "email",
                      message: "请输入正确的邮箱",
                    },
                  ],
                })(
                  <Input
                    style={{ width: 466, marginLeft: 8 }}
                    placeholder="请输入邮箱"
                    disabled={!canCustomEmailModify}
                  />
                )}
                {/* {canCustomEmailModify ? (
                    <React.Fragment>
                      <Button
                        type="link"
                        onClick={() => {
                          this.handleSave("customEmail");
                        }}
                      >
                        保存
                      </Button>
                      <Button
                        type="link"
                        onClick={() => {
                          this.resetFields("customEmail");
                          this.onChangeModifiability("canCustomEmailModify");
                        }}
                      >
                        关闭
                      </Button>
                    </React.Fragment>
                  ) : (
                    <Button
                      type="link"
                      onClick={() => {
                        this.onChangeModifiability("canCustomEmailModify");
                      }}
                    >
                      修改
                    </Button>
                  )} */}
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default UserManagement;
